<template>
    <div class="function">
        <ul>
            <li>字符串函数</li>
            <p>To-upper-case（$string）：将字符串小写字母转换为大写字母；To-lower-case（$string）：将字符串大写字母转换为小写字母</p>
            <CustomTable :list="stringFunc"></CustomTable>
            <li>数字函数</li>
            <p>ceil 向上取整、floor 向下取整、round 四舍五入、abs 绝对值、min 找最小值、max 找最大值、random 获取随机数</p>
            <CustomTable :list="numberFunc"></CustomTable>
            <li>列表函数</li>
            <p>length($list)：返回一个列表的长度值；</p>
            <CustomTable :list="listFunc"></CustomTable>
            <li>Introspection函数</li>
            <p>type-of($value)：返回一个值的类型;</p>
            <p>unit($number)：返回一个值的单位;</p>
            <p>unitless($number)：判断一个值是否带有单位;</p>
            <p>comparable($number-1, $number-2)：判断两个值是否可以做加、* 减和合并.</p>
            <li>三元条件函数</li>
            <CustomTable :list="ifFunc"></CustomTable>
            <li>Maps的函数</li>
            map 形式：
            <pre>
    $map: (
        $key1: value1,
        $key2: value2,
        $key3: value3
    )
            </pre>
            <p>map-get($map,$key)：根据给定的 key 值，返回 map 中相关的值</p>
            <p>map-has-key($map,$key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。</p>
            <p>map-keys($map)：返回 map 中所有的 key。</p>
            <p>map-values($map)：返回 map 中所有的 value。</p>
            <p>map-merge($map1,$map2)：将两个 map 合并成一个新的 map。</p>
            <p>map-remove($map,$key)：从 map 中删除一个 key，返回一个新 map。</p>
            <p>keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。</p>
            <li>颜色函数</li>
            <p>red($color)：从一个颜色中获取其中红色值；green($color)：从一个颜色中获取其中绿色值；blue($color)：从一个颜色中获取其中蓝色值；</p>
            <CustomTable :list="colorFunc"></CustomTable>
            <li>自定义函数</li>
            <p>@function...@return</p>
        </ul>
    </div>
</template>

<script>
import CustomTable from '../custom/CustomTable'
export default {
    data() {
        return {
            stringFunc: [
                {
                    name: 'unquote',
                    decs: '删除字符串中的引号',
                    params: 'string',
                    return: 'string',
                    remark: '只能删除字符串最前边和最后边的引号'
                },
                {
                    name: 'quote',
                    decs: '给字符串添加引号',
                    params: 'string',
                    return: 'string',
                    remark: '本身带有引号，就不添加、带有单引号，则跟换为双引号、单双嵌套不受影响'
                },
            ],
            numberFunc: [
                {
                    name: 'percentage',
                    decs: '将不带单位的数转换成百分比值',
                    params: 'number',
                    return: 'string',
                    remark: 'percentage(.5)//50%'
                },
            ],
            listFunc: [
                {
                    name: 'index',
                    decs: '获取数组中指定项的索引(从1开始)',
                    params: '数组、数组项',
                    return: '索引',
                    remark: 'index($colorlist, $color);'
                },
                {
                    name: 'nth',
                    decs: '通过索引值访问数组中的某一项',
                    params: '数组、索引',
                    return: '数组项',
                    remark: 'index($colorlist, $color);'
                },
                {
                    name: 'join',
                    decs: '将多个数组连接在一起',
                    params: '数组、数组、comma逗号/space空格',
                    return: '数组',
                    remark: 'join($shadow1, $shadow2, comma/space)'
                },
                {
                    name: 'append',
                    decs: '在数组中添加新值',
                    params: '数组、数组、comma逗号/space空格',
                    return: '数组',
                    remark: 'append($shadow1, $shadow2, comma/space)'
                },
                {
                    name: 'zip',
                    decs: '将几个列表结合成一个多维的列表',
                    params: 'list、list',
                    return: 'list',
                    remark: 'zip(1px 2px 3px,solid dashed dotted) => 1px solid, 2px dashed, 3px dotted;'
                },
            ],
            ifFunc: [
                {
                    name: 'if',
                    decs: '类似js三元表达式 ',
                    params: '条件、true结果、false结果',
                    return: '根据条件返回相应值',
                    remark: 'if($haserror, red, green);'
                },
            ],
            colorFunc: [
                {
                    name: 'rgb',
                    decs: '红绿蓝',
                    params: '0-255/0-100%',
                    return: '十六进制颜色值',
                    remark: 'rgb(90, 129, 32)//#5a8120'
                },
                {
                    name: 'rgba',
                    decs: '红绿蓝透明度',
                    params: '0-255/0-100%/0-1',
                    return: 'rgba自身',
                    remark: 'rgba(90, 129, 32, 0.5)'
                },
                {
                    name: 'opacify',
                    decs: '为颜色值累加不透明度',
                    params: '颜色值、不透明度',
                    return: '含不透明度的颜色值',
                    remark: 'opacify($color, 0.5);'
                },
                {
                    name: 'transparentize',
                    decs: '将颜色值的不透明度置为指定值',
                    params: '颜色值、不透明度',
                    return: '含不透明度的颜色值',
                    remark: 'transparentize($color, 0.5);'
                },
                {
                    name: 'mix',
                    decs: '根据比例混合两种颜色',
                    params: '颜色对象、颜色对象、平衡百分比',
                    return: '十六进制颜色',
                    remark: 'mix(#ff0000, #0000ff, 50%)//#800080'
                },
            ],
        }
    },
    components: {
        CustomTable
    }
}
</script>

<style lang="scss" scoped>
.function{
    text-align: left;
    overflow: scroll;
    height: calc(100% - 270px);
    ul{
        margin-top: 0;
        li{
            padding: 20px 0;
            /* color: rgb(250, 167, 0); */
            font-weight: bold;
            &:first-child{
                padding-top: 0;
            }
        }
        p{
            margin-top: 0;
        }
    }
}
</style>